<script setup>
import { ref } from 'vue'

// 地图数据
const maps = ref([
  {
    id: 'erangel',
    name: '艾伦格',
    icon: '🏝️',
    description: '经典8x8地图，地形多样，包含城市、乡村、山区等多种地形',
    imageUrl: '/src/assets/pubg-images/map-island.svg',
    features: ['经典地图', '平衡的物资分布', '多样的战术选择', '适合各类玩家'],
    hotspots: ['P城', '军事基地', '核电站', '学校', 'G港'],
    bestLootAreas: 'P城、军事基地、核电站和G港拥有最丰富的高级物资',
    strategyTips: [
      '早期可以选择地图边缘的小渔村发育',
      '中期注意缩圈方向，提前占位',
      '决赛圈多利用地形优势',
      '载具在大地图中非常重要'
    ]
  },
  {
    id: 'miramar',
    name: '米拉玛',
    icon: '🏜️',
    description: '沙漠地图，视野开阔，地形以沙漠和山脉为主，适合远距离战斗',
    imageUrl: '/src/assets/pubg-images/map-desert.svg',
    features: ['开阔地形', '远距离交火频繁', '物资分布较分散', '需要更好的瞄准能力'],
    hotspots: ['皮卡多', '圣马丁', '豪宅', '军事基地', '黑斑羚镇'],
    bestLootAreas: '皮卡多、圣马丁和军事基地是主要的高级物资点',
    strategyTips: [
      '注意利用掩体和地形遮蔽',
      '多携带倍镜和狙击枪',
      '及时补充水分和载具燃油',
      '观察远处的车辆和灰尘痕迹'
    ]
  },
  {
    id: 'sanhok',
    name: '萨诺',
    icon: '🌳',
    description: '4x4热带雨林地图，节奏快，战斗频繁，适合喜欢刚枪的玩家',
    imageUrl: '/src/assets/pubg-images/map-rainforest.svg',
    features: ['节奏快', '植被茂密', '近距离战斗多', '缩圈速度快'],
    hotspots: ['天堂度假村', '派南', '祭坛', '靶场', '洞穴'],
    bestLootAreas: '天堂度假村和派南物资丰富但竞争激烈',
    strategyTips: [
      '准备近战武器和投掷物',
      '利用植被进行隐蔽移动',
      '注意听声辨位',
      '决赛圈多利用树木和岩石作为掩体'
    ]
  },
  {
    id: 'vikendi',
    name: '维寒迪',
    icon: '❄️',
    description: '雪地地图，视野良好但目标明显，独特的雪地吉利服和滑雪板增加了游戏乐趣',
    imageUrl: '/src/assets/pubg-images/map-snow.svg',
    features: ['雪地环境', '独特的交通工具', '视觉反差大', '特殊的吉利服'],
    hotspots: ['航天基地', '城堡', '渔村', '钟塔港', '滑雪场'],
    bestLootAreas: '航天基地和城堡拥有最好的物资',
    strategyTips: [
      '注意在雪地上移动时留下的痕迹',
      '使用滑雪板快速移动',
      '白色服装在雪地中更有隐蔽性',
      '决赛圈多利用建筑物和岩石'
    ]
  }
])

// 地图筛选器
const mapFilter = ref('all')
const hoveredMap = ref(null)
const hoveredDetail = ref(null)

// 获取筛选后的地图
const getFilteredMaps = () => {
  if (mapFilter.value === 'all') {
    return maps.value
  }
  return maps.value.filter(map => map.id === mapFilter.value)
}
</script>

<style scoped>
.maps-view {
  position: relative;
  padding: 2rem 0;
  min-height: 100vh;
  background: linear-gradient(135deg, var(--bg-color) 0%, var(--bg-secondary) 100%);
  overflow-x: hidden;
}

.maps-bg-decoration {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(circle at 20% 30%, rgba(240, 103, 62, 0.05) 0%, transparent 50%),
                    radial-gradient(circle at 80% 70%, rgba(240, 103, 62, 0.05) 0%, transparent 50%);
  z-index: 0;
  pointer-events: none;
}

.container {
  position: relative;
  z-index: 1;
}

.page-title {
  text-align: center;
  font-size: 2.5rem;
  font-weight: bold;
  color: var(--text-primary);
  margin-bottom: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  position: relative;
}

.title-decoration {
  display: inline-block;
  width: 3rem;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
}

/* 地图选择器样式 */
.map-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-bottom: 3rem;
  padding: 1rem;
  background: rgba(44, 62, 80, 0.1);
  border-radius: 1rem;
  backdrop-filter: blur(10px);
}

.map-filter-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid transparent;
  border-radius: 0.75rem;
  color: var(--text-secondary);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(5px);
}

.map-filter-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  background: rgba(255, 255, 255, 0.15);
}

.map-filter-btn.active {
  background: linear-gradient(135deg, var(--primary-color), #ff7a45);
  color: white;
  border-color: var(--primary-color);
  box-shadow: 0 4px 12px rgba(240, 103, 62, 0.3);
}

.btn-icon {
  font-size: 1.25rem;
}

/* 地图详情样式 */
.maps-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

.map-detail {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 1.5rem;
  overflow: hidden;
  transition: all 0.4s ease;
  backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.map-detail:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  border-color: rgba(255, 255, 255, 0.2);
}

/* 地图头部样式 */
.map-header {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  padding: 2rem;
  background: linear-gradient(135deg, rgba(44, 62, 80, 0.2), rgba(44, 62, 80, 0.4));
  position: relative;
}

.map-image-container {
  position: relative;
  width: 300px;
  height: 200px;
  border-radius: 1rem;
  overflow: hidden;
  flex-shrink: 0;
}

.map-image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(240, 103, 62, 0.2), rgba(44, 62, 80, 0.4));
  z-index: 1;
  transition: opacity 0.3s ease;
}

.map-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease, filter 0.5s ease;
}

.image-hover {
  transform: scale(1.05);
  filter: brightness(1.1);
}

.map-basic-info {
  flex: 1;
  min-width: 280px;
}

.map-name {
  font-size: 2rem;
  font-weight: bold;
  color: var(--primary-color);
  margin-bottom: 0.75rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.map-description {
  color: var(--text-secondary);
  margin-bottom: 1.25rem;
  line-height: 1.6;
  font-size: 1.05rem;
}

.map-features {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.feature-tag {
  padding: 0.5rem 1rem;
  background: rgba(240, 103, 62, 0.1);
  border: 1px solid rgba(240, 103, 62, 0.3);
  border-radius: 2rem;
  color: var(--primary-color);
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.3s ease;
}

.feature-tag:hover {
  background: rgba(240, 103, 62, 0.2);
  transform: translateY(-2px);
}

/* 地图章节样式 */
.map-section {
  padding: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.section-title {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--text-primary);
  margin-bottom: 1.5rem;
  position: relative;
  padding-left: 1.5rem;
}

.section-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  background: var(--primary-color);
  border-radius: 50%;
}

/* 热门区域样式 */
.hotspots-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 1rem;
}

.hotspot-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 0.75rem;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.hotspot-item:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.hotspot-marker {
  width: 30px;
  height: 30px;
  background: var(--primary-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.hotspot-name {
  font-weight: 500;
  color: var(--text-secondary);
  text-align: center;
}

/* 物资分布样式 */
.loot-info {
  background: rgba(255, 255, 255, 0.05);
  padding: 1.5rem;
  border-radius: 1rem;
  border-left: 4px solid var(--primary-color);
}

.loot-info strong {
  color: var(--primary-color);
}

.loot-info p {
  margin-bottom: 1rem;
  color: var(--text-secondary);
}

.loot-tips ul {
  list-style-type: none;
  padding-left: 1.5rem;
}

.loot-tips li {
  position: relative;
  margin-bottom: 0.75rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.loot-tips li::before {
  content: '💎';
  position: absolute;
  left: -1.5rem;
  top: 0;
}

/* 战术攻略样式 */
.strategy-tips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
}

.tip-item {
  display: flex;
  gap: 1rem;
  padding: 1.25rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 0.75rem;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.tip-item:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateX(5px);
}

.tip-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.tip-content {
  color: var(--text-secondary);
  line-height: 1.5;
}

/* 地图预览样式 */
.map-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  padding: 2rem;
  background: rgba(44, 62, 80, 0.2);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.map-thumbnail {
  width: 100%;
  max-width: 400px;
  height: 200px;
  border-radius: 0.75rem;
  background-size: cover;
  background-position: center;
  border: 2px solid rgba(255, 255, 255, 0.2);
}

.map-key {
  flex: 1;
  min-width: 280px;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: center;
}

.key-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.key-color {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.key-color.urban {
  background: #8B4513;
}

.key-color.rural {
  background: #228B22;
}

.key-color.mountain {
  background: #696969;
}

.key-color.water {
  background: #4169E1;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-title {
    font-size: 2rem;
  }
  
  .title-decoration {
    width: 2rem;
  }
  
  .map-header {
    flex-direction: column;
  }
  
  .map-image-container {
    width: 100%;
    height: 200px;
  }
  
  .map-section {
    padding: 1.5rem;
  }
  
  .hotspots-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .strategy-tips {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .maps-view {
    padding: 1rem 0;
  }
  
  .page-title {
    font-size: 1.75rem;
    gap: 0.5rem;
  }
  
  .map-selector {
    gap: 0.5rem;
    padding: 0.75rem;
  }
  
  .map-filter-btn {
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
  }
  
  .hotspots-grid {
    grid-template-columns: 1fr;
  }
}
</style>

<template>
  <div class="maps-view">
    <!-- 背景装饰 -->
    <div class="maps-bg-decoration"></div>
    
    <div class="container">
      <h1 class="page-title">
        <span class="title-decoration"></span>
        地图解析
        <span class="title-decoration"></span>
      </h1>
      
      <!-- 地图选择器 -->
      <div class="map-selector">
        <button 
          class="map-filter-btn"
          :class="{ active: mapFilter === 'all' }"
          @click="mapFilter = 'all'"
        >
          <span class="btn-icon">🌍</span>
          所有地图
        </button>
        <button 
          v-for="map in maps"
          :key="map.id"
          class="map-filter-btn"
          :class="{ active: mapFilter === map.id }"
          @click="mapFilter = map.id"
          @mouseenter="hoveredMap = map.id"
          @mouseleave="hoveredMap = null"
        >
          <span class="btn-icon">{{ map.icon || '🗺️' }}</span>
          {{ map.name }}
        </button>
      </div>
      
      <!-- 地图详情 -->
      <div class="maps-container">
        <div 
          v-for="map in getFilteredMaps()"
          :key="map.id"
          class="map-detail card card-shadow animate-fade-in"
          @mouseenter="hoveredDetail = map.id"
          @mouseleave="hoveredDetail = null"
        >
          <!-- 地图图片和基本信息 -->
          <div class="map-header">
            <div class="map-image-container">
              <div class="map-image-overlay"></div>
              <img 
                :src="map.imageUrl" 
                :alt="map.name" 
                class="map-image"
                :class="{ 'image-hover': hoveredDetail === map.id }"
              />
            </div>
            <div class="map-basic-info">
              <h2 class="map-name">{{ map.name }}</h2>
              <p class="map-description">{{ map.description }}</p>
              <div class="map-features">
                <span 
                  v-for="(feature, index) in map.features"
                  :key="index"
                  class="feature-tag"
                >
                  {{ feature }}
                </span>
              </div>
            </div>
          </div>
          
          <!-- 地图热点区域 -->
          <div class="map-section">
            <h3 class="section-title">热门区域</h3>
            <div class="hotspots-grid">
              <div 
                v-for="(hotspot, index) in map.hotspots"
                :key="index"
                class="hotspot-item"
              >
                <div class="hotspot-marker">{{ index + 1 }}</div>
                <div class="hotspot-name">{{ hotspot }}</div>
              </div>
            </div>
          </div>
          
          <!-- 物资分布 -->
          <div class="map-section">
            <h3 class="section-title">物资分布</h3>
            <div class="loot-info">
              <p><strong>最佳物资区域：</strong>{{ map.bestLootAreas }}</p>
              <div class="loot-tips">
                <p><strong>物资搜索建议：</strong></p>
                <ul>
                  <li>降落在热门区域需做好刚枪准备</li>
                  <li>地图边缘的小城镇物资较少但相对安全</li>
                  <li>注意搜索建筑物的各个角落，包括阁楼和地下室</li>
                  <li>军用设施通常有更好的武器和配件</li>
                </ul>
              </div>
            </div>
          </div>
          
          <!-- 战术攻略 -->
          <div class="map-section">
            <h3 class="section-title">战术攻略</h3>
            <div class="strategy-tips">
              <div 
                v-for="(tip, index) in map.strategyTips"
                :key="index"
                class="tip-item"
              >
                <div class="tip-icon">💡</div>
                <div class="tip-content">{{ tip }}</div>
              </div>
            </div>
          </div>
          
          <!-- 地图缩略图 -->
      <div class="map-preview">
        <img 
          :src="map.imageUrl" 
          :alt="`${map.name}地图`" 
          class="map-thumbnail"
        />
        <div class="map-key">
          <div class="key-item">
            <div class="key-color urban"></div>
            <span>城市区域</span>
          </div>
          <div class="key-item">
            <div class="key-color rural"></div>
            <span>乡村区域</span>
          </div>
          <div class="key-item">
            <div class="key-color mountain"></div>
            <span>山区</span>
          </div>
          <div class="key-item">
            <div class="key-color water"></div>
            <span>水域</span>
          </div>
        </div>
      </div>
        </div>
      </div>
      
      <!-- 地图对比 -->
      <div class="maps-comparison">
        <h2 class="section-title">地图特点对比</h2>
        <div class="comparison-table">
          <table>
            <thead>
              <tr>
                <th>地图</th>
                <th>大小</th>
                <th>地形特点</th>
                <th>战斗节奏</th>
                <th>适合打法</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>艾伦格</td>
                <td>8x8</td>
                <td>多样化</td>
                <td>中等</td>
                <td>平衡型</td>
              </tr>
              <tr>
                <td>米拉玛</td>
                <td>8x8</td>
                <td>开阔沙漠</td>
                <td>中等偏慢</td>
                <td>狙击为主</td>
              </tr>
              <tr>
                <td>萨诺</td>
                <td>4x4</td>
                <td>热带雨林</td>
                <td>快</td>
                <td>近战刚枪</td>
              </tr>
              <tr>
                <td>维寒迪</td>
                <td>6x6</td>
                <td>雪地</td>
                <td>中等</td>
                <td>综合型</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      
      <!-- 地图选择建议 -->
      <div class="map-recommendations">
        <h2 class="section-title">地图选择建议</h2>
        <div class="recommendation-cards">
          <div class="recommendation-card">
            <h3>新手玩家</h3>
            <p>推荐从艾伦格开始，地形多样但不极端，有助于熟悉游戏机制</p>
          </div>
          <div class="recommendation-card">
            <h3>刚枪玩家</h3>
            <p>选择萨诺地图，节奏快，战斗频繁，适合喜欢正面交锋的玩家</p>
          </div>
          <div class="recommendation-card">
            <h3>狙击手</h3>
            <p>米拉玛是最佳选择，开阔的地形提供了绝佳的远距离作战环境</p>
          </div>
          <div class="recommendation-card">
            <h3>战术玩家</h3>
            <p>维寒迪的雪地环境需要更多的策略和隐蔽技巧，适合战术型玩家</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.maps-view {
  padding: 2rem 0;
  min-height: 100vh;
  background-color: #f5f5f5;
}

.page-title {
  font-size: 2.5rem;
  color: var(--color-pubg-primary);
  text-align: center;
  margin-bottom: 2rem;
}

.map-selector {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
}

.map-filter-btn {
  padding: 0.8rem 1.5rem;
  border: 2px solid var(--color-pubg-primary);
  background-color: transparent;
  color: var(--color-pubg-primary);
  border-radius: 2rem;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 1rem;
  font-weight: 500;
}

.map-filter-btn:hover {
  background-color: var(--color-pubg-primary);
  color: white;
}

.map-filter-btn.active {
  background-color: var(--color-pubg-primary);
  color: white;
}

.maps-container {
  margin-bottom: 3rem;
}

.map-detail {
  background-color: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin-bottom: 2rem;
}

.map-header {
  display: flex;
  flex-wrap: wrap;
}

.map-image {
  width: 50%;
  height: 300px;
  background-size: cover;
  background-position: center;
}

.map-basic-info {
  width: 50%;
  padding: 2rem;
}

.map-name {
  font-size: 2rem;
  color: var(--color-pubg-primary);
  margin-bottom: 1rem;
}

.map-description {
  color: var(--color-text);
  margin-bottom: 1rem;
  line-height: 1.6;
}

.map-features {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.feature-tag {
  background-color: var(--color-pubg-primary-light);
  color: white;
  padding: 0.3rem 0.8rem;
  border-radius: 1rem;
  font-size: 0.9rem;
}

.map-section {
  padding: 2rem;
  border-top: 1px solid var(--color-border);
}

.section-title {
  font-size: 1.5rem;
  color: var(--color-heading);
  margin-bottom: 1rem;
  position: relative;
  padding-bottom: 0.5rem;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 3px;
  background-color: var(--color-pubg-primary);
}

.hotspots-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 1rem;
}

.hotspot-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  background-color: #f9f9f9;
  border-radius: 5px;
}

.hotspot-marker {
  width: 24px;
  height: 24px;
  background-color: var(--color-pubg-primary);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: bold;
}

.hotspot-name {
  font-weight: 500;
}

.loot-info {
  line-height: 1.6;
}

.loot-tips {
  margin-top: 1rem;
  padding: 1rem;
  background-color: #f9f9f9;
  border-radius: 5px;
}

.loot-tips ul {
  list-style-type: disc;
  padding-left: 1.5rem;
}

.strategy-tips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
}

.tip-item {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  background-color: #f9f9f9;
  border-radius: 5px;
}

.tip-icon {
  font-size: 1.5rem;
}

.tip-content {
  flex: 1;
}

.map-preview {
  padding: 2rem;
  background-color: #f9f9f9;
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.map-thumbnail {
  width: 300px;
  height: 200px;
  background-size: cover;
  background-position: center;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.map-key {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.key-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.key-color {
  width: 20px;
  height: 20px;
  border-radius: 3px;
}

.key-color.urban {
  background-color: #777;
}

.key-color.rural {
  background-color: #6b8e23;
}

.key-color.mountain {
  background-color: #8b4513;
}

.key-color.water {
  background-color: #4682b4;
}

.maps-comparison {
  margin-bottom: 3rem;
}

.comparison-table {
  overflow-x: auto;
}

.comparison-table table {
  width: 100%;
  border-collapse: collapse;
  background-color: white;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.comparison-table th,
.comparison-table td {
  padding: 1rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.comparison-table th {
  background-color: var(--color-pubg-primary);
  color: white;
  font-weight: 500;
}

.comparison-table tr:hover {
  background-color: #f9f9f9;
}

.map-recommendations {
  margin-bottom: 2rem;
}

.recommendation-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.5rem;
}

.recommendation-card {
  background-color: white;
  padding: 1.5rem;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-top: 4px solid var(--color-pubg-primary);
}

.recommendation-card h3 {
  color: var(--color-pubg-primary);
  margin-bottom: 0.5rem;
}

.recommendation-card p {
  color: var(--color-text);
  line-height: 1.5;
}

@media (max-width: 768px) {
  .page-title {
    font-size: 2rem;
  }
  
  .map-header {
    flex-direction: column;
  }
  
  .map-image,
  .map-basic-info {
    width: 100%;
  }
  
  .map-preview {
    justify-content: center;
  }
  
  .map-thumbnail {
    width: 100%;
    max-width: 300px;
  }
  
  .hotspots-grid,
  .strategy-tips,
  .recommendation-cards {
    grid-template-columns: 1fr;
  }
  
  .map-selector {
    flex-direction: column;
    align-items: center;
  }
  
  .map-filter-btn {
    width: 100%;
    max-width: 300px;
  }
}
</style>